<template>
  <div>
    <el-card>
      <ButtonComp :list="handleFun" @handleClick="handleClick" />
      <el-table :data="tableData" :style="{ width }" :border="border">
        <template v-for="item in tableHead">
          <el-table-column
            v-if="!item.options"
            :prop="item.prop"
            :label="item.label"
            align="center"
          />
          <el-table-column
            v-else
            :prop="item.prop"
            :label="item.label"
            align="center"
          >
            <template #default="{ row }">
              <ButtonComp
                :data="row"
                :list="item.options"
                @handleClick="handleClick"
              />
            </template>
          </el-table-column>
        </template>
      </el-table>
    </el-card>
  </div>
</template>

<!-- vue3 表格组件（组件上方有操作按钮） -->
<script setup>
import ButtonComp from "./ButtonComp.vue";
import { defineProps, defineEmits } from "vue";

defineProps({
  /**
   * 表格数据
   */
  tableData: {
    type: Array,
    default: () => [],
  },
  /**
   * 边框
   */
  border: {
    type: Boolean,
    default: () => true,
  },
  /**
   * 表格上方操作按钮
   */
  handleFun: {
    type: Array,
    default: () => [],
  },
  /**
   * 表格宽度
   */
  width: {
    type: String,
    default: () => "100%",
  },
  /**
   * 表头
   */
  tableHead: {
    type: Array,
    default: () => [],
  },
});

const $emit = defineEmits(["handleClick"]);

/**
 * 按钮
 */
function handleClick(val) {
  // console.log('val', val);
  $emit("handleClick", val);
}
</script>

<style scoped lang="scss"></style>
